<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../node_modules//bootstrap//dist/css/bootstrap.min.css">
    <title>留言板</title>
    <script src="../public/url-utils.js"></script>
    <style>
        button {
            outline: none !important;
        }

        .search {
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 10px;
        }

        .content {
            width: 30%;
        }

        .add {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
<div class="container">
    <!--标题-->
    <div class="page-header">
        <h1>留言板<small>简易留言板</small></h1>
    </div>

    <!--检索-->
    <div>
        <form class="form-inline search">
            <div class="form-group">
                <label for="name">昵称</label>
                <input type="text" class="form-control" id="name" placeholder="输入昵称" name="name">
            </div>
            <div class="form-group content">
                <label for="content">内容</label>
                <input type="text" class="form-control" id="content" placeholder="检索内容" name="content">
            </div>
            <button type="submit" class="btn btn-default btn-primary">检索</button>
        </form>
    </div>

    <!--留言内容-->
    <div>
        <ul class="list-group">

            {{each list}}

            <li class="list-group-item">
                <a href="/del?id={{$value.id}}">{{$value.content}}</a>
                <span class="badge">{{$value.name}}</span>
            </li>

            {{/each}}
        </ul>
    </div>
    <!--分页-->
    <div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li onclick="pre()">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {{each total}}
                <li><a href="/?pageNum={{$value}}">{{$value}}</a></li>
                {{/each}}


                <li onclick="next()">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <!--    新增按钮-->
    <div class="add">
        <a href="/add">
            <button type="button" class="btn btn-large btn-block btn-primary">新增留言</button>
        </a>
    </div>


</div>

</body>


<script>
    console.log(location.search)
    let query = getQueryobj(location.search)

    console.log(query.pageNum)

    <!--    上一页-->
    function pre() {
        if (query.pageNum > 1) {
            location.href = '/?pageNum=' + Number(query.pageNum - 1)
            // console.log(query.pageNum)
        }
    }

    //下一页
    function next() {
        if (query.pageNum < {{(total.length)}})
        {
            location.href = '/?pageNum=' + (Number(query.pageNum) + 1)
        }
    }
</script>
</html>